<template>
  <div class="m-brandservice">
    <div class="form_group">
      <div>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          全部结算周期<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item >全部结算周期</el-dropdown-item>
            <el-dropdown-item >周结</el-dropdown-item>
            <el-dropdown-item >月结</el-dropdown-item>
            <el-dropdown-item >年结</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          全部状态<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>全部状态</el-dropdown-item>
            <el-dropdown-item>已使用</el-dropdown-item>
            <el-dropdown-item>未使用</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
        <InputBox />
      </div>
      <el-button type="primary" size="mini" @click="newRule"
        >新增</el-button>
    </div>
    <StaffMgl
      :cols="colsData"
      :tableData="tableData"
      :showborder="false"
      :hiddenIcon = []
      @icon4="icon4Click"
    />
    <!-- 查看规则弹出框 -->
    <Dialog :showDialog="isshow" @close="getClose" Title="查看规则">
      <template #content>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="规则信息" name="first">
            <p>规则名称小规模品牌规则</p>
            <p>规则描述适用于小于100家门店的连锁品牌</p>
            <p>结算周期月结</p>
            <p>收费项</p>
            <el-table :data="tableDataSearch" border style="width: 100%">
              <el-table-column v-for="item in tabcols" :key="item.index" :prop="item.props" :label="item.label">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="品牌信息" name="second">
            <p>共 {{}} 个品牌</p>
             <el-table :data="tableDataBrand" border style="width: 100%">
              <el-table-column v-for="item in tabBrand" :key="item.index" :prop="item.props" :label="item.label">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </template>
    </Dialog>
    <Confirm
      :showConfirm="isConfirm"
      @close="getClose"
      @confirm="confirm"
      Title="确认删除该规则吗？"
    />
    <Confirm
      :showConfirm="isDefault"
      @close="getClose"
      Title="确认要把该规则设置为默认规则吗？"
    />
  </div>
</template>

<script>
import StaffMgl from "@/components/StaffManagetList";
// import Dropdown from "@/components/DropdownPublic";
import InputBox from "@/components/InputBox/index.vue";
import Dialog from "../components/dialog.vue";
import Confirm from "../components/confirm.vue";

import { reactive ,toRefs, onMounted} from "vue";
import { useRouter } from "vue-router";

//相关请求
import { chargeList ,chargeDelRule} from "@/api/billingEngine.js";
export default {
  name: "Brandservice",
  components: { StaffMgl , InputBox, Dialog, Confirm },
  setup() {
    let state = reactive({
      isshow: false,
      isConfirm: false,
      isDefault: false,
      tableData: [],
      colsData: [
        {
          props: "ruleCode",
          label: "规则编号",
        },
        {
          props: "ruleName",
          label: "规则名称",
        },
        {
          props: "ruleDesc",
          label: "规则描述",
        },
        {
          props: "billingCycle",
          label: "结算周期",
        },
        {
          props: "minCharge",
          label: "最低收费",
        },
        {
          props: "charges",
          label: "收费项",
        },
        {
          props: "logol",
          label: "品牌数量",
        },
        {
          props: "state",
          label: "状态",
        },
        {
          props: "createTime",
          label: "创建日期",
          sortable:true
        },
        {
          props: "creat_people",
          label: "创建人",
        },
      ],
      tableDataSearch:[
        {
          

        }
      ],
      tabcols:[
        {props:"w",label:"收费项"},
        {props:"l",label:"收费类型"},
        {props:"b",label:"最低收费"},
        {props:"z",label:"最高收费"},
        {props:"m",label:"描述"}
      ],
      tableDataBrand:[
        {}
      ],
      tabBrand:[
        {props:"w",label:"品牌编号"},
        {props:"l",label:"品牌名称"},
        {props:"b",label:"加入日期"}
      ],
      activeName: "first",
      deleteItem:{}
    });
    const router = useRouter();
    onMounted(()=> {
      chargeList({ruleType:1}).then(res => {
        if(res.code === 200){
          state.tableData = res.data.data;
        }
      })
    })
    //新增
    function newRule() {
      router.push("./newrule?=new");
    }
    //编辑
    function edit() {
      
      router.push("./newrule?=edit");
    }
    //查看
    function search() {
      state.isshow = true;
    }
    //设为默认
    function cfgDefault() {
      state.isDefault = true;
    }
    //触发确认弹出框
    function icon4Click(v) {
      state.isConfirm = true;
      state.deleteItem = {
        codes: [v.ruleCode]
      }
    }
    //确认删除
    function confirm(v){
      console.log(state.deleteItem)
      // codes: ["WH1619056663040"]
      chargeDelRule(state.deleteItem).then(res => {
          if(res.code === 200){
            state.isConfirm = v;
          }
      }) 
    }
    //通知父组件状态
    function getClose(params) {
      state.isshow = params;
      state.isConfirm = params;
      state.isDefault = params;
    }

    return {
      ...toRefs(state),
      newRule,
      edit,
      getClose,
      search,
      icon4Click,
      cfgDefault,
      confirm
    };
  },
};
</script>

<style lang="less" scoped>
.form_group {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.el-divider--horizontal {
  margin: 0;
}

//表格样式
</style>
